<template>
    <div class="navmovies">
        <!-- v-for遍历父组件的titles数组 -->
        <template v-for="(item, index) in titles" :key="item">
            <!-- active 当前生效的索引 -->
            <div class="movieslists" :class="{ active: index === nowindex }" @click="movieslistclick(index)">
                <slot :itema="item">
                    <span>{{ item }}</span>
                </slot>
            </div>
        </template>
    </div>
</template>
<script>

export default {
    // 接收父组件传来的titles 类型为Array
    props: {
        titles: {
            type: Array,
            // 默认传值对象类型
            default: () => []
        }
    },
    data() {
        return {
            nowindex: 0
        }
    },
    methods: {
        //数组形式记录传过去的字符名
        emits: ["movieslist"],
        movieslistclick(index) {
            this.nowindex = index
            // 子传父 传过去的是索引
            this.$emit("movieslist", index)
        }
    }
}
</script>
<style scoped lang="less">
.navmovies {
    display: flex;
    text-align: center;
    height: 44px;
    line-height: 44px;

    .movieslists {
        flex: 1;
        color: #b989b9;
    }

    .active {
        color: #2c5475;
        // padding: 10px 20px;
        // border-bottom: 0px solid #e1aab1;
        position: relative;
    }

    .movieslists::before {
        content: '';
        display: block;
        /*开始时候下划线的宽度为0*/
        width: 0;
        height: 3px;
        position: absolute;
        left: 0;
        bottom: -10px;
        background: #000;
        /*这里我们设定所有改变都有动画效果，可以自己指定样式才有动画效果*/
        transition: all 0.3s ease-in-out;
    }

    .movieslists:hover::before {
        width: 100%;
    }
}
</style>